﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCAddAppoint.ascx.cs"
    Inherits="UCAddAppoint" %>
<style>
    #content
    {
        text-align: center;
        width: 768px;
        height: 791px;
        max-height: 791px;
    }
    #calendar
    {
        text-align: left;
    }
    .jsbank_sample_cont
    {
        margin: 20px;
        padding: 20px;
    }
    .jsbank_sample_tit
    {
        font-weight: bold;
        margin-bottom: 10px;
        padding: 5px;
        width: auto;
        background-color: #c0c0c0;
        border: 5px solid #a0a0a0;
        color: black;
        text-align: center;
    }
    #layer1
    {
        position: absolute;
        visibility: hidden;
        width: 200px;
        height: 200px;
        left: 20px;
        top: 30%;
        background-color: White;
        border: 1px solid #000;
        padding: 10px;
        margin-left: 260px;
        margin-top: -66px;
        font-size: 17px;
        color: Green;
    }
    #close
    {
        float: right;
    }
    .ddlist
    {
        height: 30px;
        width: 180px;
    }
    .tdw
    {
        width: 300px;
    }
    div.calendar
    {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
    div.calendar table
    {
        width: 100%;
    }
    div.dateField
    {
        width: 140px;
        padding: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        color: #555;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    div#popupDateField:hover
    {
        background-color: #cde;
        cursor: pointer;
    }
    .divSale
    {
        width: 100%;
    }
    .divHeader
    {
        color: #FFFFFF;
        font-weight: bold;
    }
    </style>

<script type="text/javascript">
 var GetSerName=new Array();
var GetSerID=new Array();
var GetSerPrice=new Array();

 function clearDropDownList(sel1)   
{   
len1 = sel1.options.length;   
 for (i=len1;i>=0;i-- )   
 {   
   sel1.options[i] = null;  
 }
}
 function clear(sel)   
{   
len = sel.options.length;   
 for (i=len;i>=0;i-- )   
 {   
   sel.options[i] = null;  
 }
}
  function addNewClient()
   {
        var cliname = document.getElementById('txtName').value;
        var cliemail = document.getElementById('txtEmail').value;
        var cliphone = document.getElementById('txtPhone').value;

        if (cliname.trim() == '')
        {
            //show message
        }
        else if (cliphone.trim() == '')
        {
            //show message
        }
        else
        {
            Ajax_Control_Appointment_app.addNewClient(cliname,cliemail,cliphone,addNewClient_callback);
        }
    }
    function addNewClient_callback(res) {
        if (res.error == null) {
            var newcli = res.value;
            var client = document.getElementById('<%=ddlClient.ClientID%>');
            client.options[client.options.length] = new Option(newcli[1], newcli[0]);
            client.selectedIndex = client.options.length - 1;
            CloseAddNewClient();
        }
    }
    function ShowAddNewClient()
    {
        document.getElementById("layer1").style.display="inline";
        document.getElementById("layer1").style.visibility="visible" 
        document.getElementById('txtName').value = ''; 
        document.getElementById('txtEmail').value = '';
        document.getElementById('txtPhone').value = '';
        
        return false;
    }
    function CloseAddNewClient()
    {
        document.getElementById("layer1").style.visibility="hidden" 
        document.getElementById('txtName').value = ''; 
        document.getElementById('txtEmail').value = '';
        document.getElementById('txtPhone').value = '';
    }
    
    function ServiceTypeChange(SerID,me)
{    
    var selectedValue=me.options[me.selectedIndex].value;            
    if(selectedValue=='0')
    {
        alert("Please choose Service type");
    }
    else
    {      
        Ajax_Control_Appointment_app.loadServiceBySerTypeId(selectedValue,SerID,ServiceTypeChange_callback);
    }    
    return false;
}
function ServiceTypeChange_callback(res)
{ 
    var val=res.value;   
     
    if(val!=null )        
    {
        var tblEmp=val.tbl;   
        var statesList= document.getElementById(val.SerID);               
           clearDropDownList(statesList);
           statesList.options[statesList.options.length] = new Option('Choose Service Name',0);
           for(var i=0;i<tblEmp.Rows.length;i++)
           {                                
  	            statesList.options[statesList.options.length] = new Option(tblEmp.Rows[i].SER_NAME,tblEmp.Rows[i].SER_ID);		
	       }
    }
    else
    {
          clearDropDownList(statesList);
          alert('no data');
    }
}

var TestSerName=new Array();
var flag=0;
var testH=0;
function ServiceChange(SerID,PriceID,me)
{ 
     var ite=me.options[me.selectedIndex].value;
     var mot=me.options[me.selectedIndex].innerHTML;
     testH=ite;
     if(ite=='0')
     {
        if(TestSerName.length==0)
        {
         alert("Please choose Service ");           
        }      
        else
        {       
            for(var i=0;i<TestSerName.length;i++)
            {
                 var j=i+1;
                 //--------------------SELECT ARRAY'S ITEM------------------------
                 var Pla=TestSerName.slice(i,j);
                 if(Pla==SerID)
                 {                                                           
                     document.getElementById(PriceID).innerHTML="";
                     TestSerName.splice(i,1);
                     GetSerName.splice(i,1);
                     GetSerPrice.splice(i,1); 
                     GetSerID.splice(i,1);
                 }
            }   
        }
     }
     else
     {   
        if(TestSerName.length==0)
        {
            TestSerName.push(SerID);
            GetSerName.push(mot);
            GetSerID.push(ite);
         }
         else
         {            
            for(var i=0;i<TestSerName.length;i++)
                {
                     var j=i+1;
                     //--------------------SELECT ARRAY'S ITEM------------------------
                     var Pla=TestSerName.slice(i,j);
                     if(Pla==SerID)       
                     {
                        if(flag==0)
                        {
                            TestSerName.splice(i,1,SerID);
                            GetSerName.splice(i,1,mot);
                            GetSerID.splice(i,1,ite);                             
                            
                            var tedo= Ajax_Control_Appointment_app.LoadServicePrice(ite,PriceID).value;
                            var tbloi=tedo.tbl;
                            var Price_New=tbloi.Rows[0].Ser_Price;
                            GetSerPrice.splice(i,1,Price_New);
                            document.getElementById(PriceID).innerHTML="$ "+Price_New;                           
                            flag=1;
                            break;                  
                        }
                        if(Price!="")
                        {                            
                            document.getElementById(PriceID).innerHTML="";                       
                        }                        
                     }
                     else
                     {
                        var cd=TestSerName.length;
                        var ted=TestSerName.slice(j,cd);
                        if(ted=="")
                        {
                           TestSerName.push(SerID);                         
                           GetSerName.push(mot); 
                           GetSerID.push(ite); 
                           break;  
                        }
                     }                 
                }
         }
         if(flag==0)
         {   
           Ajax_Control_Appointment_app.LoadServicePrice(ite,PriceID,ServiceChange_callback);         
         }  
         else
         {
           flag=0;
         }      
    }
    
 return ite  
}

function ServiceChange_callback(res)
{
    var te=res.value;     
    if(te!=null)
    {  
       var Pla_Pri= document.getElementById(te.PriceID);
       var tblSer=te.tbl;
       if(tblSer==null)
       {
           Pla_Pri.innerHTML="";
       }
       else
       {
           var Price=tblSer.Rows[0].Ser_Price;
           Pla_Pri.innerHTML='$ '+Price;
            GetSerPrice.push(Price); 
       }
    }
}
 var GetInsert=new Array();
function addAppointment()
{
    var emp_id=document.getElementById('<%=ddlEmp.ClientID%>').value;
    var cli_id=document.getElementById('<%=ddlClient.ClientID%>').value;
    var spa_id=document.getElementById('<%=ddlSpa.ClientID%>').value; 
    var getSerName=GetSerName.toString();    
    var getSerPrice=GetSerPrice.toString();     
    var getserid=GetSerID.toString();
    var Time=document.getElementById('<%=ddlTime.ClientID%>').value ;
    Ajax_Control_Appointment_app.InsertDataPopUp(emp_id,cli_id,spa_id,getSerName,getSerPrice,getserid,Time);   


    window.location.href="Appointment.aspx";    
    return false;
}
 
</script>

<div id="hideshow" style="position: absolute;
    width: 768px; height: 800px; background-color: gray; 
    visibility: visible">
    <div id="layer1" style="visibility: hidden">
        <a href="#" onclick="CloseAddNewClient()" style="text-decoration: none; float: right;
            color: Red; font-size: 20px;">X</a>
        <div>
            <label for="username">
                Client Name</label>
            <input id="txtName" type="text" size="25px" />
        </div>
        <div>
            <label for="password">
                Email</label>
            <input id="txtEmail" type="text" size="25px" />
        </div>
        <div>
            <label for="password">
                Phone</label>
            <input id="txtPhone" type="text" size="25px" />
        </div>
        <br />
        <div>
            <input id="btnOK" type="button" value="OK" onclick="addNewClient()" />
        </div>        
    </div>
    <div style="height: 100%; background-color: white; background-image: url(images/bg.png);
        background-repeat: repeat; width: 100%;">
        <br />
        <table style="width: 100%;" cellpadding="10px">
            <tr>
                <td colspan="2" style="text-align: center">
                </td>
                <td rowspan="8" style="height: 470px; vertical-align: bottom; padding-bottom: 458px;">
                    <asp:DropDownList ID="ddlTime" runat="server" Width="100%" >                    
                        <asp:ListItem Text="08:00 AM" Value="08:00 AM"></asp:ListItem>
                        <asp:ListItem Text="08:15 AM" Value="08:15 AM"></asp:ListItem>
                        <asp:ListItem Text="08:30 AM" Value="08:30 AM"></asp:ListItem>
                        <asp:ListItem Text="08:45 AM" Value="08:45 AM"></asp:ListItem>
                        <asp:ListItem Text="09:00 AM" Value="09:00 AM"></asp:ListItem>
                        <asp:ListItem Text="09:15 AM" Value="09:15 AM"></asp:ListItem>
                        <asp:ListItem Text="09:30 AM" Value="09:30 AM"></asp:ListItem>
                        <asp:ListItem Text="09:45 AM" Value="09:45 AM"></asp:ListItem>
                        <asp:ListItem Text="10:00 AM" Value="10:00 AM"></asp:ListItem>
                        <asp:ListItem Text="10:15 AM" Value="10:15 AM"></asp:ListItem>
                        <asp:ListItem Text="10:30 AM" Value="10:30 AM"></asp:ListItem>
                        <asp:ListItem Text="10:45 AM" Value="10:45 AM"></asp:ListItem>
                        <asp:ListItem Text="11:00 AM" Value="11:00 AM"></asp:ListItem>
                        <asp:ListItem Text="11:15 AM" Value="11:15 AM"></asp:ListItem>
                        <asp:ListItem Text="11:30 AM" Value="11:30 AM"></asp:ListItem>
                        <asp:ListItem Text="11:45 AM" Value="11:45 AM"></asp:ListItem>
                        <asp:ListItem Text="12:00 PM" Value="12:00 PM"></asp:ListItem>
                        <asp:ListItem Text="12:15 PM" Value="12:15 PM"></asp:ListItem>
                        <asp:ListItem Text="12:30 PM" Value="12:30 PM"></asp:ListItem>
                        <asp:ListItem Text="12:45 PM" Value="12:45 PM"></asp:ListItem>
                        <asp:ListItem Text="01:00 PM" Value="01:00 PM"></asp:ListItem>
                        <asp:ListItem Text="01:15 PM" Value="01:15 PM"></asp:ListItem>
                        <asp:ListItem Text="01:30 PM" Value="01:30 PM"></asp:ListItem>
                        <asp:ListItem Text="01:45 PM" Value="01:45 PM"></asp:ListItem>
                        <asp:ListItem Text="02:00 PM" Value="02:00 PM"></asp:ListItem>
                        <asp:ListItem Text="02:15 PM" Value="02:15 PM"></asp:ListItem>
                        <asp:ListItem Text="02:30 PM" Value="02:30 PM"></asp:ListItem>
                        <asp:ListItem Text="02:45 PM" Value="02:45 PM"></asp:ListItem>
                        <asp:ListItem Text="03:00 PM" Value="03:00 PM"></asp:ListItem>
                        <asp:ListItem Text="03:15 PM" Value="03:15 PM"></asp:ListItem>
                        <asp:ListItem Text="03:30 PM" Value="03:30 PM"></asp:ListItem>
                        <asp:ListItem Text="03:45 PM" Value="03:45 PM"></asp:ListItem>
                        <asp:ListItem Text="04:00 PM" Value="04:00 PM"></asp:ListItem>
                        <asp:ListItem Text="04:15 PM" Value="04:15 PM"></asp:ListItem>
                        <asp:ListItem Text="04:30 PM" Value="04:30 PM"></asp:ListItem>
                        <asp:ListItem Text="04:45 PM" Value="04:45 PM"></asp:ListItem>
                        <asp:ListItem Text="05:00 PM" Value="04:00 PM"></asp:ListItem>
                        <asp:ListItem Text="05:15 PM" Value="05:15 PM"></asp:ListItem>
                        <asp:ListItem Text="05:30 PM" Value="05:30 PM"></asp:ListItem>
                        <asp:ListItem Text="05:45 PM" Value="05:45 PM"></asp:ListItem>
                        <asp:ListItem Text="06:00 PM" Value="06:00 PM"></asp:ListItem>
                        <asp:ListItem Text="06:15 PM" Value="06:15 PM"></asp:ListItem>
                        <asp:ListItem Text="06:30 PM" Value="06:30 PM"></asp:ListItem>
                        <asp:ListItem Text="06:45 PM" Value="06:45 PM"></asp:ListItem>
                        <asp:ListItem Text="07:00 PM" Value="06:00 PM"></asp:ListItem>
                        <asp:ListItem Text="07:15 PM" Value="07:15 PM"></asp:ListItem>
                        <asp:ListItem Text="07:30 PM" Value="07:30 PM"></asp:ListItem>
                        <asp:ListItem Text="07:45 PM" Value="07:45 PM"></asp:ListItem>
                        <asp:ListItem Text="08:00 PM" Value="07:00 PM"></asp:ListItem>
                        <asp:ListItem Text="08:15 PM" Value="08:15 PM"></asp:ListItem>
                        <asp:ListItem Text="08:30 PM" Value="08:30 PM"></asp:ListItem>
                        <asp:ListItem Text="08:45 PM" Value="08:45 PM"></asp:ListItem>
                        <asp:ListItem Text="09:00 PM" Value="09:00 PM"></asp:ListItem>
                        <asp:ListItem Text="09:15 PM" Value="09:15 PM"></asp:ListItem>
                        <asp:ListItem Text="09:30 PM" Value="09:30 PM"></asp:ListItem>
                        <asp:ListItem Text="09:45 PM" Value="09:45 PM"></asp:ListItem>
                        <asp:ListItem Text="10:00 PM" Value="10:00 PM"></asp:ListItem>        
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td align="left" width="30%">
                    <asp:Label ID="Label5" runat="server" Text="Client List"></asp:Label>
                </td>
                <td class="tdw" align="center">
                    <asp:DropDownList ID="ddlClient" runat="server" Width="230px">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td align="center">
                    <a style="clear" href="#" onclick="ShowAddNewClient();return false" target="_self">Add
                        new Client</a>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <asp:Label ID="Label6" runat="server" Text="Date"></asp:Label>
                </td>
                <td class="tdw" align="center">
                    <asp:TextBox ID="txtDate" runat="server" Width="230px" Height="21px" ReadOnly="True" CssClass="ddlist">08/28/2010</asp:TextBox>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <asp:Label ID="Label8" runat="server" Text="Employee"></asp:Label>
                </td>
                <td class="tdw" align="center">
                    <asp:DropDownList ID="ddlEmp" runat="server" Width="230px">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <asp:Label ID="Label9" runat="server" Text="Spa"></asp:Label>
                </td>
                <td class="tdw" align="center">
                    <asp:DropDownList ID="ddlSpa" runat="server" Width="230px">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <br />
                    <div style="width: 100%; height: 260px; overflow: auto;">
                        <table border="0" width="100%" cellspacing="0" bgcolor="#F7F6F3">
                        </table>
                        <asp:GridView ID="GrvServicePoPuP" runat="server" AutoGenerateColumns="False" Style="width: 500px;
                            height: auto" OnRowDataBound="GrvServicePoPuP_RowDataBound" BackColor="White"
                            BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                            <RowStyle ForeColor="#000066" />
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="190px" HeaderText="Service Type">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlServiceTypePoPuP" Style="width: 190px" runat="server">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="190px" HeaderText="Service Name">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlServicePoPuP" runat="server" Style="width: 190px" AppendDataBoundItems="true">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="120px" HeaderText="Price">
                                    <ItemTemplate>
                                        <asp:Label ID="lblPriceServicePoPuP" runat="server" Text="" Style="width: 120px"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <FooterStyle BackColor="White" ForeColor="#000066" />
                            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                        </asp:GridView>
                    </div>
    </div>
    </td> </tr>
    <tr style="height: 50px;">
        <td colspan="1" align="right">
            <input id="btnAdd" onclick="return addAppointment()" src="images/apm_btn.png" type="image" />
        </td>
        <td>           
             <asp:ImageButton ID="btnExit" runat="server" ImageUrl="~/images/exit.png" OnClick="btnExit_Click" />
            
        </td>
    </tr>
    </table>
</div>
</div> 